import {
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import type { Issue } from "./issues-columns";

export function IssuesItem({ issue }: { issue: Issue }) {
  return (
    <DrawerContent className="min-w-[30vw] max-w-[90vw]">
      <DrawerHeader className="flex flex-row items-center gap-2 p-4">
        <Badge className="uppercase">{issue.type}</Badge>
        <DrawerTitle>{issue.title}</DrawerTitle>
      </DrawerHeader>
      <div className="flex flex-col gap-1 px-4">
        <div className="flex items-center gap-4">
          <p className="text-muted-foreground text-xs">Author: </p>
          <p className="text-xs">{issue.owner}</p>
        </div>
        <div className="flex items-center gap-4">
          <p className="text-muted-foreground text-xs">Create At: </p>
          <p className="text-xs">{issue.create_at.toLocaleString()}</p>
        </div>
      </div>
      <DrawerFooter className="flex flex-row items-center gap-4 p-4">
        <Button size={"sm"}>Submit</Button>
        <DrawerClose>
          <Button variant="outline" size={"sm"}>
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  );
}
